<template>
    <div class="delivery">
        <heade2 :title="msg"></heade2>
        <div class="location">
            <div class="location_left">
                <i class="iconfont icon-weizhi"></i>
                <span>北京</span>
                <b class="iconfont icon-xiajiankuohao"></b>
            </div>
            <div class="location_center">
                <i class="iconfont icon-fangdajing"></i>
                <input type="text" placeholder="搜索小区/写字楼">
            </div>
            <div class="location_right">
                搜索
            </div>
        </div>
        <div class="present">
            <span>北京</span>
            <i>当前定位城市</i>
            <em>重新定位</em>
        </div>
        <div class="list" ref="aa">
            <div>
                <ul v-for="(i,key,index) in cityList" :key="index" ref="skipp">
                    <h2>{{key}}</h2>
                    <li v-for="(i,key,index) in i" :key="index">{{i.name}}</li>
                </ul>
            </div>
        </div>
        <aside>
            <ul>
                <li v-for="(i,key,index) in cityList" :key="index" @click="skip(index)">{{key}}</li>
            </ul>
        </aside>
    </div>
</template>

<script>
import heade2 from './heade2'
import BScroll from 'better-scroll'
import api from "./utils/api"
export default {
    data(){
        return{
            msg:'选择收获地址',
            title:'',
            cityList:'',
            num:0,
            cityindex:''
        }
    },
    components:{
        heade2
    },
    mounted(){
        this.list = new BScroll(this.$refs.aa,{
            scrollY:true,
            click:true
        });
    },
    methods:{
        skip(index){
            console.log(index);
            this.num=index;
            console.log(this.$refs.skipp[index])
            this.list.scrollToElement(this.$refs.skipp[index])
        }
    },
    created(){
        api.getAddressList()
        .then(res => {
            console.log(res)
            this.cityList=res.data.data.cities;
        })
    },
    
}

</script>
<style lang="scss" scoped>
    .location{
        height:0.44rem;
        font-size:0.14rem;
        display:flex;
        align-items: center;
        .location_left{
            margin-left: 0.12rem;
        }
        .location_center{
            margin-left: 0.2rem;
            position: relative;
            i{
                position: absolute;
                top:25%;
                left:0.15rem;
            }
            input{
                width:2.14rem;
                height:0.3rem;
                border-radius: 0.15rem;
                outline: none;
                text-indent: 0.4rem;
                font-family: PingFangSC-Regular;
                font-size: 0.14;
                color: #CCCCCC;
                letter-spacing: -0.41px;
            }
        }
        .location_right{
            margin-left: 0.14rem;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #DD3333;
            letter-spacing: -0.13px;
            line-height: 16px;
        }
    }
    .present{
        display: flex;
        height:0.44rem;
        span{
            margin-left:0.14rem;
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #333333;
            letter-spacing: -0.41px;
            line-height: 0.44rem;
        }
        i{
            margin-left:0.1rem;
            font-family: PingFangSC-Regular;
            font-size: 0.12rem;
            color: #999999;
            letter-spacing: -0.35px;
            line-height: 0.44rem;
        }
        em{
            margin-left:1.84rem;
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #DD3333;
            letter-spacing: -0.41px;
            line-height: 0.44rem;
        }
    }
    .list{
        width:100%;
        position: absolute;
        top:1.54rem;
        bottom: 0;
        overflow: hidden;
        div{
            ul{
                text-indent: 0.15rem;
                h2{
                    background: #F6F6F6;
                    width: 3.75rem;
                    height: 0.22rem;
                    font-family: PingFangSC-Semibold;
                    font-size: 0.16rem;
                    color: #333333;
                    letter-spacing: -0.15px;
                    line-height: 0.22rem;
                }
                li{
                    width: 3.75rem;
                    height: 0.48rem;
                    font-family: PingFangSC-Regular;
                    font-size: 0.16rem;
                    color: #333333;
                    letter-spacing: -0.15px;
                    line-height: 0.48rem;
                }
            }
        }
    }
    aside{
        position: relative;
        ul{
            position: absolute;
            right:0;
            li{
                font-family: PingFangSC-Semibold;
                font-size: 0.12rem;
                color: #333333;
                letter-spacing: -0.11px;
                text-align: center;
                line-height: 0.12rem;
                padding: 0.05rem 0.05rem;
            }
            .skip{
                font-family: PingFangSC-Semibold;
                font-size: 0.12rem;
                color: #DD3333;
                letter-spacing: -0.11px;
                line-height: 0.12rem;
                padding: 0.05rem 0.05rem;
            }
        }
    }
</style>